/*
使用示例：
<Table :columns="columns" :dataSource="dataSource" />
columns: [
        {
          key: "materialDescription",
          name: "物料名称/规格",
          width: 300,
          render(item, value, index) {
            return html;
          },
        },
]
dataSource: [
        {
          materialDescription: "物料名称",
          num2: "入库数量",
          num3: "包装数量",
          status: 1223,
        },
      ],
*/
<template>
  <div>
    <scroll-view :scroll-x="true" class="table" v-if="columns.length">
      <!-- 表头数据 -->
      <view class="table-th">
        <view
          :style="{ flex: item.width ? '0 0 ' + item.width + 'rpx' : 'auto' }"
          v-for="item in columns"
          :key="item.key"
          >{{ item.name }}</view
        >
      </view>
      <!-- 数据输出 -->
      <view
        class="table-body"
        @click="clickColumn(item)"
        v-for="item in dataSource"
        :key="item.key"
      >
      <!-- 使用columns限制单元格只显示columns表头相应字段，阻隔dataSource其他无关字段输出 -->
        <view
          :style="{ flex: key.width ? '0 0 ' + key.width + 'rpx' : 'auto' }"
          v-for="(key,index) in columns"
          :key="key.key"
          @click="clickCell(item[key['key']], key['key'])"
          >
          <!-- render自定义输出显示 -->
          <rich-text :nodes="key.render(item,item[key['key']],index)" v-if="key.render"></rich-text>
          <!-- 默认显示 -->
          <text v-else>{{ item[key["key"]] }}</text>
          </view
        >
      </view>
      <view v-if="!dataSource.length" class="noData">暂无数据</view>
    </scroll-view>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    // 表头
    columns: {
      type: Array,
      required: true,
    },
    // 数据
    dataSource: {
      type: Array,
      required: true,
    },
  },
  methods: {
    // 点击行
    clickColumn(item) {
      uni.$emit("clickColumn", { rows: item });
    },
    // 点击单元格
    clickCell(value, key) {
      uni.$emit("clickCell", { value, key }); 
    },
  },
};
</script>
<style scoped>
.table {
  /* background-color: rgba(245, 245, 245, 1); */
  text-align: center;
  width: 100%;
  border-radius: 9rpx;
  font-size: 36rpx;
  white-space: nowrap;
  border: 2rpx solid rgba(221, 221, 221, 1);
  border-right: 2rpx solid rgba(221, 221, 221, 1);
}
.table-th {
  min-width: 100%;
  color: rgba(42, 130, 228, 1);
  display: flex;
  white-space: nowrap;
}
.table-body {
  display: flex;
  white-space: nowrap;
}
.table-body:last-child view {
  border-bottom: none;
}
.table-th view,
.table-body view {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
  padding: 20rpx;
  background: rgba(221, 221, 221, 1);
  border-right: 2rpx solid rgba(221, 221, 221, 1);
}
.table-body view:last-child {
  border-right: none;
}
.table-body view {
  background: #fff;
  font-size: 34rpx;
}
.noData {
  margin-left: 50%;
  height: 100rpx;
  padding: 20rpx 0;
  font-size: 30rpx;
  color: rgba(128, 128, 128, 1);
}
</style>